import { useRequest } from "ahooks";
import { Button, Table } from "antd";
import type { TableProps } from "antd";
import { nanoid } from "nanoid";

interface DataType {
  key: string;
  api: string;
  property?: string;
  description?: string;
}

const fn1 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("完成");
      resolve(1);
    }, 1000);
  });
};

// const fn2 = () => {
//   return new Promise((resolve) => {
//     setTimeout(() => {
//       resolve(2);
//     }, 1000);
//   });
// };

export const AHooks = () => {
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "api",
      dataIndex: "api",
      key: "api",
    },
    {
      title: "属性",
      dataIndex: "property",
      key: "property",
      render: (value: string) => {
        switch (value) {
          case "grid-category":
            return 123;
          default:
            break;
        }
      },
    },
    {
      title: "描述",
      dataIndex: "description",
      key: "description",
      render: (value: string) => {
        return <div dangerouslySetInnerHTML={{ __html: value }} />;
      },
    },
  ];

  const data: DataType[] = [
    {
      key: nanoid(),
      api: "grid类别",
      property: "grid-category",
      description:
        "注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。",
    },
    {
      key: nanoid(),
      api: "容器属性",
    },
    {
      key: nanoid(),
      api: "grid-template-columns",
      property: "grid-template-columns",
      description: `grid-template-columns属性定义每一列的列宽<br>可用值：（1）repeat()（2）auto-fill 关键字（3）fr 关键字（4）minmax()（5）auto 关键字（6）网格线的名称
      <br>除了auto-fill，还有一个关键字auto-fit，两者的行为基本是相同的。只有当容器足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，才会有行为差异：auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度。
        <br>fr在大多数情况下会自动填充剩余空间，但是在reapeat(auto-fill, minmax(100px, 1fr))时，表现不同，当剩余空间不足一列时，会自动填充，但当剩余空间足够一列后，便会变回最小宽度，不在自动填充
        <br>grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。`,
    },
  ];

  const { run } = useRequest(fn1, {
    manual: true,
    onSuccess: () => {
      console.log(1111);
    },
  });

  const test = async () => {
    const res = await run();
    console.log("test ~ res:", res);
  };

  return (
    <>
      <Button onClick={test}>测试</Button>
      <Table columns={columns} dataSource={data} pagination={false} />
    </>
  );
};
